<template>
  <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="模态消息">
    <a-button @click="showInfo" class="ml-5 mt-5"> 只有标题 </a-button>
    <a-button @click="showSuccess" color="success" class="ml-5 mt-5"> 标题+内容简介 </a-button>
    <a-button @click="showWarn" color="warning" class="ml-5 mt-5"> 自定义消失时间 </a-button>
    <a-button @click="showError" color="error" class="ml-5 mt-5"> 监听消失 </a-button>

    <div class="w-full bg-white rounded-md">
      <ol class="ml-5 mt-5 pb-3">
        <li class="mt-2">封装的是 ant 的 notification 组件 </li>
        <li class="mt-2">元素有: 标题、内容、图标三个元素 </li>
        <li class="mt-2">支持:info|success|warning|error 四个方法, 用法一样，只是图标不同 </li>

        <li class="mt-2">
          <a href="https://www.antdv.com/components/notification-cn">ant notification 官方文档</a>
        </li>
      </ol>
    </div>

    <CollapseContainer class="w-full bg-white rounded-md">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { useMessage } from '@/hooks/web/useMessage';

  const { notification } = useMessage();

  // 基本用法
  function showInfo() {
    notification.warn({
      message: '只有标题',
    });
  }

  // 标题+内容简介
  function showSuccess() {
    notification.success({
      message: '标题+内容简介',
      description: '这是通知简介....',
    });
  }

  // 自定义消失时间
  function showWarn() {
    notification.warn({
      message: '自定义消失时间',
      description: '默认3秒消失，修改为1秒',
      duration: 1,
    });
  }

  // 监听消失
  function showError() {
    notification.error({
      message: '监听消失',
      description: '这是通知...content message...',
      duration: 1,
      onClose: () => {
        console.log('提示消失');
      },
    });
  }
</script>

<script lang="ts">
  function getDoc() {
    return `

\`\`\`typescript
import { useMessage } from '@/hooks/web/useMessage';
const { notification } = useMessage();

// 基本用法
function showInfo() {
  notification.info({
    message: '只有标题',
  });
}

// 标题+内容简介
function showSuccess() {
  notification.success({
    message: '标题+内容简介',
    description: '这是通知简介....',
  });
}

// 自定义消失时间
function showWarn() {
  notification.warn({
    message: '自定义消失时间',
    description: '默认3秒消失，修改为1秒',
    duration: 1,
  });
}

// 监听消失
function showError() {
  notification.error({
    message: '监听消失',
    description: '这是通知...content message...',
    duration: 1,
    onClose: () => {
      console.log('提示消失');
    },
  });
}
\`\`\`

`;
  }
</script>
